<template>
  <div class="filterConditions">
    <el-row :gutter="10" v-for="(filterItem, index) in filtersArr" :key="index">
      <el-col :span="6">
        <el-select v-model="filterItem.fieldName" filterable placeholder="请选择要筛选的字段名" size="small"
          @change="fieldChange($event, filterItem)">
          <el-option v-for="item in fieldOptions" :key="item.fieldName" :label="item.name" :value="item.fieldName"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>

      <template v-if="showCalCondition(filterItem.formType, filterItem.fieldName, filterItem)">
        <el-col class="interval-base" :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <el-select v-model="filterItem.condition" placeholder="请选择范围" @change="selectChange($event, filterItem)" size="small">
            <el-option
              v-for="item in getFilterOptions(conditionTypeFun ? conditionTypeFun(filterItem) : filterItem.formType, filterItem)"
              :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
      </template>
        <!-- 商机组 -->
        <el-col
        v-if="filterItem.formType == 'business_cause'"
        class="interval-base"
        :span="1">&nbsp;</el-col>
      <el-col
        v-if="filterItem.formType == 'business_cause'"
        :span="4">
        <el-select
          v-model="filterItem.flowName"
          @change="typeOptionsChange(filterItem)">
          <el-option
            v-for="item in filterItem.typeOption"
            :key="item.flowId"
            :label="item.flowName"
            :value="item.flowName" />
        </el-select>
      </el-col>

      <el-col class="interval-base" :span="1">&nbsp;</el-col>
      <el-col :span="getValueSpan(filterItem.formType, filterItem.fieldName, filterItem) ? 11: 16" style="position: relative;">
        <template
          v-if="filterItem.condition === 'isNull' ||
            filterItem.condition === 'isNotNull'">
          &nbsp;
        </template>
        <template v-else-if="updateFlag">
          <el-select
            v-if="filterItem.formType === 'checkStatus'
              || filterItem.formType === 'dealStatus'
              || filterItem.fieldName === 'invoiceStatus'
              || filterItem.fieldName === 'receivedStatus'
              || (filterItem.formType === 'select' && getSettingValueType(filterItem.setting) != 'string')"
            v-model="filterItem.value"
            placeholder="请选择筛选条件">
            <el-option
              v-for="item in filterItem.setting"
              :key="item.value"
              :label="item.name"
              :value="item.value" />
          </el-select>
          <el-select
            v-else-if="['select', 'checkbox', 'field_tag'].includes(filterItem.formType)"
            v-model="filterItem.value"
            :multiple="filterItem.formType !== 'field_tag'"
            placeholder="请选择筛选条件">
            <el-option
              v-for="item in filterItem.setting"
              :key="item"
              :label="item"
              :value="item" />
          </el-select>
          <el-select
            v-else-if="filterItem.formType === 'field_attention'"
            v-model="filterItem.value"
            multiple
            placeholder="请选择筛选条件">
            <el-option
              v-for="item in filterItem.setting"
              :key="item.value"
              :label="item.name"
              :value="item.value" />
          </el-select>
          <template
            v-else-if="filterItem.formType == 'number' ||
              filterItem.formType == 'floatnumber' ||
              filterItem.formType == 'percent'">
            <div v-if="filterItem.type === 14" class="date-range-value">
              <el-input-number
                v-model="filterItem.min"
                :controls="false"
                class="small" />
              <span>-</span>
              <el-input-number
                v-model="filterItem.max"
                :controls="false"
                class="small" />
            </div>
            <el-input-number
              v-else
              v-model="filterItem.value"
              :controls="false"
              style="width: 100%;"
              class="small" />
          </template>
          <template v-else-if="filterItem.formType === 'date' || filterItem.formType === 'datetime'">
            <el-date-picker
              v-if="filterItem.type === 14"
              :ref="`DatePicker${index}`"
              v-model="filterItem.range"
              :picker-options="getPickerOptions(filterItem, index)"
              :type="filterItem.formType === 'date' ? 'daterange' : 'datetimerange'"
              :value-format="filterItem.formType === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              @change="datePickerChange(filterItem)" />
            <div
              v-if="filterItem.timeType"
              class="date-range-content"
              @click="dateRangeSelect(filterItem, index)">{{ filterItem.timeTypeName }}</div>
            <el-date-picker
              v-show="filterItem.type !== 14"
              v-model="filterItem.value"
              :value-format="filterItem.formType === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
              :type="filterItem.formType"
              placeholder="选择日期" />
          </template>
          <el-select
            v-else-if="filterItem.formType === 'select'"
            v-model="filterItem.settingName">
            <el-option
              v-for="item in filterItem.settingList"
              :key="item.settingId"
              :label="item.settingName"
              :value="item.settingName" />
          </el-select>
          <el-input
            v-else
            size="small"
            v-model="filterItem.value"
            placeholder="多个条件请用；隔开" />
          </template>
          </el-col>
          <el-col
          :span="1"
          class="delete">
          <i
            class="el-icon-error delete-btn"
            @click="handleDelete(index)" />
        </el-col>
    </el-row>
  </div>
</template>
<script>
import FilterConditionItem from '@/mixins/filters/filterConditionItem'

export default {
  name: 'filterConditions',
  props:{
    filtersArr: Array,
    fieldOptions:Array
  },
  data() {
    return {
      loading: false,
     
      updateFlag: true

    }
  },
  mixins: [FilterConditionItem],

  mounted() {

  },
  methods: {
  
    conditionTypeFun(data) {
      if (data && data.fieldName === 'status') {
        return data.fieldName
      }
      return data.formType
    },
    fieldChange(val, filterItem) {
      const obj = this.fieldOptions.find(item => {
        return item.fieldName === filterItem.fieldName
      })
      if (obj) {
        filterItem.formType = obj.formType
        filterItem.name = obj.name
        this.getFilterDefaultItemByFormType(filterItem, obj, this.conditionTypeFun(filterItem))
      }

      // this.$emit('on-field-change')
      // this.updateFlag = false
      // this.$nextTick(() => {
      //   this.updateFlag = true
      // })
    },
     //是否展示条件
     showCalCondition(formType, fieldName, formItem) {
      return this.getFilterOptions(this.conditionTypeFun ? this.conditionTypeFun(formItem) : formType, fieldName).length > 0
    },

    //值span
    getValueSpan(formType, fieldName, formItem) {
      if (formType == 'business_cause') {
        return 8
      }
      return this.showCalCondition(formType, fieldName, formItem) ? 8 : 13
    },
    getSettingValueType(setting) {
      if (setting && setting.length > 0) {
        const value = setting[0]
        return typeof value
      }
      return []
    },
    //连接条件的变更
     selectChange(event, formItem) {
      this.getFilterOptions(this.conditionTypeFun ? this.conditionTypeFun(formItem) : formItem.formType, formItem.fieldName).forEach(item => {
        if (item.value === event) {
          formItem.type = item.type
        }
      })
    },
      /**
     * 删除筛选条件
     * @param index
     */
     handleDelete(index) {
      this.$emit('on-field-delete', index)
    },
    //datepicker change
     datePickerChange(formItem) {
      formItem.timeTypeName = ''
      formItem.timeType = ''
    },

    // 时间筛选配置
    getPickerOptions(item, itemIndex) {
      const types = [
        { text: '本年度', value: 'year' },
        { text: '上一年度', value: 'lastYear' },
        { text: '下一年度', value: 'nextYear' },
        { text: '上半年', value: 'firstHalfYear' },
        { text: '下半年', value: 'nextHalfYear' },
        { text: '本季度', value: 'quarter' },
        { text: '上一季度', value: 'lastQuarter' },
        { text: '下一季度', value: 'nextQuarter' },
        { text: '本月', value: 'month' },
        { text: '上月', value: 'lastMonth' },
        { text: '下月', value: 'nextMonth' },
        { text: '本周', value: 'week' },
        { text: '上周', value: 'lastWeek' },
        { text: '下周', value: 'nextWeek' },
        { text: '今天', value: 'today' },
        { text: '昨天', value: 'yesterday' },
        { text: '明天', value: 'tomorrow' },
        { text: '过去7天', value: 'previous7day' },
        { text: '过去30天', value: 'previous30day' },
        { text: '未来7天', value: 'future7day' },
        { text: '未来30天', value: 'future30day' }
      ]
      const shortcuts = []
      for (let index = 0; index < types.length; index++) {
        const element = types[index]
        shortcuts.push({
          text: element.text,
          onClick: (picker) => {
            picker.$emit('pick', [], false)
            this.$nextTick(() => {
              item.timeTypeName = element.text
              item.timeType = element.value
            })
          }
        })
      }

      return {
        shortcuts: shortcuts
      }
    },
    dateRangeSelect(formItem, index) {
      const datePicker = this.$refs[`DatePicker${index}`][0]
      this.$nextTick(() => {
        datePicker.focus()
        datePicker.pickerVisible = true
      })
    },
  }
}

</script>
<style lang="scss" scoped>
.filterConditions {

  .sceneName {
    width: 300px;
    padding-bottom: 15px;
  }
  .el-row{
    margin-bottom: 8px;
    overflow: hidden;
    line-height: 32px;
   .delete-btn{
      margin-left: 15px;
      font-weight: 400;
      color: #bbb;
      cursor: pointer;
  }
 .el-date-editor, .el-select{
    width: 100%;
}
  }
}
</style>